<template>
  <div class="reading-power">
    <div>
      <fieldset class="electricity-info-w">
        <legend>电价(元/千瓦·时):</legend>
        <div>
          <el-table :data="tableData" style="width: 100%" height="350">
            <el-table-column prop="label" label="" width="200" />
            <el-table-column prop="value" label="值" width="140">
              <template #default="scope">
                <el-input
                  v-if="scope.row.state"
                  v-model="scope.row.value"
                  @focus="focusEvent(scope.row, scope.$index, scope.column)"
                  @blur="blurEvent(scope.row, scope.$index, scope.column)"
                ></el-input>
                <p @click="cellClick(scope.row, scope.column)" v-else>
                  {{ scope.row.value }}
                </p>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </fieldset>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { sElectricityPriceUpdate } from "@/api/source.js";
import { useAppStore } from "@/stores";
import { storeToRefs } from "pinia";
const useApp = useAppStore();
let { currentEleType } = storeToRefs(useApp);
const props = defineProps({
  position: String,
});
const eleTypeVisible = ref(false);
const tableData = ref([
  {
    prop: "jian",
    label: "尖电价",
  },
  {
    prop: "feng",
    label: "峰电价",
  },
  {
    prop: "ping",
    label: "平电价",
  },
  {
    prop: "gu",
    label: "谷电价",
  },
  {
    prop: "capacity",
    label: "基本电费(按容量计费)",
  },
  {
    prop: "collectionFund",
    label: "代收基金",
  },
  {
    prop: "demand",
    label: "基本电费(按需量计费)",
  },
]);
// 初始化
onMounted(() => {
  if (
    currentEleType.value[props.position] != undefined &&
    currentEleType.value[props.position]
  ) {
    matchData(currentEleType.value[props.position].price);
  }
});
//匹配当前电价
const matchData = (eleTypeData) => {
  tableData.value.forEach((item) => {
    switch (item.prop) {
      case "jian":
        item.value = eleTypeData.jian;
        break;
      case "feng":
        item.value = eleTypeData.feng;
        break;
      case "ping":
        item.value = eleTypeData.ping;
        break;
      case "gu":
        item.value = eleTypeData.gu;
        break;
      case "capacity":
        item.value = eleTypeData.capacity;
        break;
      case "collectionFund":
        item.value = eleTypeData.collectionFund;
        break;
      case "demand":
        item.value = eleTypeData.demand;
        break;
      default:
        break;
    }
    item.id = eleTypeData.id;
  });
};
const cellClick = (row, column) => {
  row.state = !row.state;
};
const focusEvent = (row, index, column) => {
  row.oldValue = row.value;
};
const blurEvent = (row, index, column) => {
  row.state = !row.state;
  if (row.value !== row.oldValue) {
    let parm = {
      id: row.id,
    };
    switch (row.prop) {
      case "feng":
        parm.feng = row.value;
        break;
      case "gu":
        parm.gu = row.value;
        break;
      case "jian":
        parm.jian = row.value;
        break;
      case "ping":
        parm.ping = row.value;
        break;
      case "capacity":
        parm.capacity = row.value;
        break;
      case "collectionFund":
        parm.collectionFund = row.value;
        break;
      case "demand":
        parm.demand = row.value;
        break;
      default:
        break;
    }
    sElectricityPriceUpdateApi(parm);
  }
};
//修改电价
const sElectricityPriceUpdateApi = async (parm) => {
  await sElectricityPriceUpdate(parm)
    .then((res) => {
      // console.log(res);
      ElMessage({
        type: "success",
        message: "修改成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "warning",
        message: "修改失败",
      });
    });
};
</script>

<style lang="scss" scoped>
.reading-power {
  display: flex;
}
</style>
